<template>
    <div>
        <div>
            <mt-swipe :auto="4000">
                <mt-swipe-item>1</mt-swipe-item>
                <mt-swipe-item>2</mt-swipe-item>
                <mt-swipe-item>3</mt-swipe-item>
            </mt-swipe>
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">新闻资讯</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">图片分享</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">商品购买</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">留言反馈</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">视频专区</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">联系我们</div>
            </a></li>
        </ul>
    </div>
</template>

<script>
    import got2 from '../../../NodeForApi/src/img/got2.jpg'
    import got4 from '../../../NodeForApi/src/img/got4.jpg'
    import got5 from '../../../NodeForApi/src/img/got5.jpg'
</script>

<style lang='scss'>
    .mui-grid-view.mui-grid-9 {
        background-color: white;
        border: none;
    }

    .mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3 {
        border: none;
    }

    body {
        background-color: white;
    }

    .mint-swipe {
        height: 200px;
    }

    .mint-swipe-item {
        &:nth-child(1) {
            background-image: url('../../../NodeForApi/src/img/got2.jpg');
            background-size: 100% 100%;
        }
        &:nth-child(2) {
            background-image: url('../../../NodeForApi/src/img/got4.jpg');
            background-size: 100% 100%;
        }
        &:nth-child(3) {
            background-image: url('../../../NodeForApi/src/img/got5.jpg');
            background-size: 100% 100%;
        }
    }

    /*.mint-swipe-item:nth-child(1) {
        background-color: red;
    }

    .mint-swipe-item:nth-child(2) {
        background-color: blue;
    }

    .mint-swipe-item:nth-child(3) {
        background-color: green;
    }*/
</style>
